﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px">
        <el-row>
            <el-col :span="6">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="0">全部</el-menu-item>
                    <el-menu-item index="2">正在拍</el-menu-item>
                    <el-menu-item index="1">预告中</el-menu-item>
                    <el-menu-item index="3">已结束</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="6">
                <div style="padding-top: 10px">
                    <el-input v-model="keyword" placeholder="请输入查询关键字"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="padding-top: 10px">
                    <el-button icon="el-icon-search" @click="toSearch()">搜索</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-empty :image-size="500" v-if="items.length==0"
              image="http://www.yijianshuzi.com/assets/staticimg/empty.d7ddfe2.jpg"></el-empty>
    <div class="infinite-list-wrapper" v-infinite-scroll="loadMthod"
         style="margin-bottom: 20px;height:640px;overflow-y:auto" v-if="items.length>0">
        <div class="list">
            <el-row>
                <el-col :span="6" v-for="item in items">
                    <el-card>
                        <a href="#" @click.prevent="toRoundDetail(item.id,item.startprice)"><img :src="item.productSrcs[0]"
                                                                                                 style="width:100%;" class="image"></a>

                        <h3 v-text="item.pname" style="color:black;font-size: large;"></h3>
                        <span style="color: gray"> 围观人数：{{item.lookeramount}} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
                        <span style="color: gray">叫价次数：{{item.callamount}}</span>
                        <div v-if="item.state=='1'" >
                            <el-row>
                                <el-col :span="6">
                                    <span style="background:green;color: white">距离开始</span>
                                </el-col>
                                <el-col :span="12">
                                    <el-statistic :value="Date.parse(item.starttime)" time-indices
                                                  format="HH时:mm分:ss秒" @finish="startRound(item.id)"
                                    ></el-statistic>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-if="item.state=='2'">
                            <span style="background:red;color: white">正在拍卖中</span>
                        </div>
                        <div v-if="item.state=='3'">
                            <span style="background:gray;color: white">已结束</span>
                        </div>

                    </el-card>
                </el-col>
            </el-row>
            <div align="center">
                <p v-if="loading">加载中...</p>
                <p v-if="noMore">没有更多了</p>
            </div>
        </div>

    </div>
</div>
<script>
    var roundList = new Vue({
        el: "#app",
        data: {
            items: [],
            pageSize: 8,
            pageNumber: 1,
            totalPage: 0,
            totalRecords: 0,
            loading: false,
            noMore: false,
            roundState: 0,
            activeIndex: '0',
            keyword: "",
        },
        methods: {
            toSearch: function () {
                window.parent.app.keyword = this.keyword
                window.parent.app.openWork("/open/searchRound")
            },
            handleSelect: function (index) {
                this.roundState = index
                this.initRoundList()
            },
            startRound: function (id) {
                //alert(id)
                //时间到了执行代码：
            },
            initRoundList: function () {
                //alert(this.roundState)

                $.post("/round/roundPage", {
                    pageSize: this.pageSize,
                    pageNumber: this.pageNumber,
                    state: this.roundState
                }, function (data) {
                    roundList.items = data.list;
                    roundList.totalPage = data.pages;
                    roundList.totalRecords = data.total;
                })
            },
            loadMthod() {
                roundList.loading = true;
                setTimeout(function () {
                    if (roundList.pageSize >= roundList.totalRecords) {
                        roundList.noMore = true;
                        roundList.loading = false;
                        return
                    }
                    roundList.pageSize += 4;
                    roundList.initRoundList();
                    roundList.loading = false;
                }, 2000)
            },
            toRoundDetail(roundId,startPrice) {
                window.parent.app.roundId = roundId;
                window.parent.app.startPrice = startPrice;
                location.href = "roundDetail.html";
            }
        },
        created() {
            this.initRoundList();
            //this.roundState=window.parent.app.roundState;
        }
    });
</script>
</body>
</html>
